<!--  -->
<template>
  <div class="my_form">
    <!-- 头部插槽 -->
    <div class="header">
      <slot name="header"></slot>
    </div>
    <!-- 中间检索内容 -->
    <el-form v-bind="formConfig">
      <el-row>
        <template v-for="(item, index) in formConfig.formItems" :key="index">
          <el-col v-bind="formConfig.colLayout">
            <el-form-item v-if="!item.isHidden" :label="item.label" :rules="item.rule" :style="formConfig.itemStyle">
              <!-- 输入框/密码框 -->
              <template v-if="item.type === 'input' || item.type === 'password' || item.type === 'textarea'">
                <!-- <el-input v-bind="item.otherOptions" :type="item.type" :placeholder="item.placeholder"
                  v-model="formaDataModel[`${item.field}`]" :show-password="item.type === 'password'" /> -->
                <el-input v-bind="item.otherOptions" :type="item.type" :placeholder="item.placeholder"
                  :model-value="modelValue[`${item.field}`]" @update:modelValue='handleUpdate($event, item)'
                  :show-password="item.type === 'password'" />
              </template>
              <!-- 下拉框-->
              <template v-else-if="item.type === 'select'">
                <el-select placeholder="请选择" :model-value="modelValue[`${item.field}`]"
                  @update:modelValue='handleUpdate($event, item)' v-bind="item.otherOptions">
                  <el-option v-for="(option, index) in item.options" :label="option.title" :key="index"
                    :value="option.value">
                    {{ option.title }}
                  </el-option>
                </el-select>
              </template>
              <!-- 日期类型 -->
              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker v-bind="item.otherOptions" :model-value="modelValue[`${item.field}`]"
                  @update:modelValue='handleUpdate($event, item)' />
              </template>
              <!--单选框  -->
              <template v-else-if="item.type === 'radio'">
                <el-radio-group
                  :model-value="modelValue[`${item.field}`]??item.defaultValue"
                  @update:modelValue='handleUpdate($event, item)' v-bind="item.otherOptions">
                  <el-radio v-for="(option, index) in item.options" :label="option.value" :key="index">{{ option.title
                  }}
                  </el-radio>
                </el-radio-group>

              </template>
              <!--多选框  -->
              <template v-else-if="item.type === 'checkbox'">
                <el-checkbox-group
                  :model-value="modelValue[`${item.field}`]?? item.defaultValue "
                  @update:modelValue='handleUpdate($event, item)' v-bind="item.otherOptions">
                  <el-checkbox v-for="option in item.options" :key="option.value" :label="option.value">
                    {{ option.title }}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
              <!--自动补全  -->
              <template v-else-if="item.type === 'autocomplete'">
                <Autocomplete
                 :model-value="modelValue[`${item.field}`]"
                 @update:modelValue='handleUpdate($event, item)'
                 :field = "item.field"
                 :fieldValue="modelValue[`${item.field}`]"
                :otherOptions="item.otherOptions"
                :dataList='item.options'></Autocomplete>
              </template>

                <!--前置输入框  -->
              <template v-else-if="item.type === 'prependInput'">
               <el-input :model-value="modelValue[`${item.field}`]"
                  @update:modelValue='handleUpdate($event, item)' v-bind="item.otherOptions" >
                <template #prepend>{{item.prepend}}</template>
              </el-input>
              </template>
            </el-form-item>
          </el-col>
        </template>

      </el-row>

    </el-form>

    <!-- 底部插槽 -->
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script setup lang='ts' >
import { PropType } from 'vue';

import type { IFormConfig } from "../types"
import Autocomplete from "@/base-ui/autocomplete"

const props = defineProps({
  formConfig: {
    type: Object as PropType<IFormConfig>,
    required: true
  },
  modelValue: {
    type: Object,
    required: true
  },
})


const emit = defineEmits(['update:modelValue'])
// 方案1 浅拷贝
// const formaDataModel = ref({ ...props.modelValue })
// watch(formaDataModel, (newVal) => {
//   emit('update:modelValue', newVal)
// }, { deep: true })

// 方案二手动监听
const handleUpdate = (value: any, item:any) => {
  // console.log(value);


  emit('update:modelValue', { ...props.modelValue, [item.field]: value })
}



</script>
<style lang='less' scoped>
.my_form {
  background: #fff;
  margin: 20px;
}
</style>
